<template>
    <div>
        <h3>最新音乐</h3>
        <!-- <van-cell-group v-for="(Item, index) in songList" :key="index">
            <van-cell title="{Item.name}" value="{Item.song.artists[0].name}" />
        </van-cell-group> -->
        <van-cell center v-for="Item in songList" 
        :key="Item.id" 
        :title="Item.name"
        :label="Item.song.artists[0].name + ' - ' + Item.name"
        inset="true">
            <template #right-icon>
                <van-icon name="play-circle-o" size="0.6rem" />
            </template>
        </van-cell>
    </div>
</template>


<script>
// import { betterScrollHorizontal } from '../../common/betterScroll.js'

export default {
    data() {
        return {
            songList: [],//最新音乐数据
        }
    },
    created() {
        this.getSongListData(this.id, this.pageNo, this.pageSize);
    },
    methods: {
        //获取歌单数据
        getSongListData() {
            this.$request("get", "/personalized/newsong", {
                id: this.$route.params.id
            })
                .then(res => {
                    // console.log(res)
                    this.songList = res.result
                    // console.log(this.listData)
                    // console.log(this.listData)
                    //异步数据的处理
                    // betterScrollHorizontal(this, this.$refs.wrapper, this.$refs.content, this.songList.length, 8)

                })
        },
        selectItem(item) {
            const id = item.id;//获取歌单id
            // console.log(id);
            //编程式导航，带路由的对象方式
            this.$router.push({ path: `/playlistlist/${id}` })
        }
    },
}
</script>